<template>
  <div class="lc-table-container">
    <p class="seg-title">相应数据表格</p>
    <lc-table-integration
      ref="lcTableRef"
      v-loading="loading"
      :tableData="tableData"
      :columns="columns"
      :allowDrop="false"
      :pagination="true"
      columnType=""
      :tableTools="false"
      :showSummary="false"
      :selection="false"
      tableMultiLine=""
      :paginationConfig="paginationConfig"
      tableRowClassName=""
      :requestConfig="requestConfig"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
    >
      <template v-slot:toolBtn>
        <el-button>批量处理</el-button>
      </template>
      <template #custom-slot-order="{ index }">
        <span>{{
          tableRowOrder(
            paginationConfig.currentPage,
            paginationConfig.pageSize,
            index,
          )
        }}</span>
      </template>
    </lc-table-integration>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { tableRowOrder } from "@/utils/format";

defineOptions({
  name: "Table9527",
});

// 表格 start
const lcTableRef = ref(null);
const loading = ref(false);
const tableData = ref([
  {
    batchSeq: "001",
    systemName: "xx系统001",
    createDate: "2001-02-23",
    appName: "应用名称1",
  },
  {
    batchSeq: "002",
    systemName: "xx操作系统002",
    createDate: "2001-02-23",
    appName: "应用名称2",
  },
  {
    batchSeq: "003",
    systemName: "xx操作系统002",
    createDate: "2001-02-22",
    appName: "应用名称1",
  },
]);
const columns = [
  {
    label: "序号",
    width: 60,
    slot: true,
    slotName: "custom-slot-order",
  },
  {
    label: "批次号",
    prop: "batchSeq",
    minWidth: 120,
  },
  {
    label: "系统名称",
    prop: "systemName",
    minWidth: 120,
  },
  {
    label: "创建时间",
    prop: "createDate",
    minWidth: 120,
  },
];
// 分页参数
const paginationConfig = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});

// 传入请求配置： url地址、请求类型、请求参数（string包裹）
const requestConfig = ref({
  url: "https://www.xx.com",
  type: "get",
  response: JSON.stringify({ name: "xx", type: "1", createTime: "" }),
});

/**分页page-change事件 */
const handlePageChange = (page) => {
  paginationConfig.currentPage = page;
  getTableData();
};
/**分页size-change事件 */
const handleSizeChange = (size) => {
  paginationConfig.pageSize = size;
  getTableData();
};
/**获取表格数据 */
const getTableData = () => {
  loading.value = true;
  // 获取表格数据
};
// 表格 end
</script>
<style scoped>
.lc-table-container {
  margin-right: 0 auto;
  padding: 20px;

  .seg-title {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 16px;
    font-weight: 600;
  }

  .seg-title:first-child {
    border-top: none;
    padding-top: 0px;
    margin-top: 0px;
    font-size: 16px;
    font-weight: 600;
  }
}
</style>
